<template>
  <div class="event-detail-container">
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>
    
    <template v-else>
      <!-- 活动基本信息 -->
      <div class="event-header">
        <div class="cover-container">
          <img :src="eventDetail.cover" :alt="eventDetail.title" class="event-cover" />
        </div>
        <div class="event-info">
          <h1 class="event-title">{{ eventDetail.title }}</h1>
          
          <div class="event-meta">
            <div class="meta-item">
              <el-icon><Calendar /></el-icon>
              <span>{{ formatDateTime(eventDetail.startTime) }} - {{ formatTime(eventDetail.endTime) }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Location /></el-icon>
              <span>{{ eventDetail.location }}</span>
            </div>
            <div class="meta-item">
              <el-icon><InfoFilled /></el-icon>
              <span>分类：{{ eventDetail.category }}</span>
              <el-tag v-for="tag in eventDetail.tags" :key="tag" size="small" class="tag-item">{{ tag }}</el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动描述 -->
      <div class="event-section">
        <h2 class="section-title">活动详情</h2>
        <div class="event-description">{{ eventDetail.description }}</div>
      </div>

      <!-- 活动地点地图 -->
      <div class="event-section">
        <h2 class="section-title">活动地点</h2>
        <div class="location-container">
          <!-- 左侧位置信息 -->
          <div class="location-info">
            <div class="location-address">
              <el-icon><Location /></el-icon>
              <span>{{ eventDetail.location }}</span>
            </div>
            <div class="location-tips">
              <p>活动将在此地点举行，请提前安排好行程。</p>
              <p>如需导航，请参考地图位置。</p>
            </div>
          </div>
          
          <!-- 右侧地图 -->
          <div class="map-wrapper">
            <div v-if="mapLoading" class="map-loading">
              <el-skeleton :rows="3" animated />
              <div class="loading-text">地图加载中...</div>
            </div>
            <div 
              class="map-container" 
              ref="mapContainer" 
              id="event-map"
              :class="{ 'map-loading': mapLoading }"
            ></div>
          </div>
        </div>
      </div>

      <!-- 票种信息 -->
      <div class="event-section">
        <h2 class="section-title">票种信息</h2>
        <div class="ticket-list">
          <el-card v-for="ticket in eventDetail.ticketTypes" :key="ticket.id" class="ticket-card">
            <div class="ticket-info">
              <div class="ticket-name">{{ ticket.name }}</div>
              <div class="ticket-price">¥{{ ticket.price }}</div>
            </div>
            <div class="ticket-stock">
              <span :class="['stock-status', ticket.stockLeft > 10 ? 'sufficient' : 'limited']">
                剩余 {{ ticket.stockLeft }} 张
              </span>
            </div>
            <div class="ticket-action">
              <el-button type="primary" :disabled="ticket.stockLeft <= 0" @click="handleBuyTicket(ticket)">
                {{ ticket.stockLeft > 0 ? '立即购买' : '已售罄' }}
              </el-button>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 推荐活动 -->
      <div class="event-section">
        <h2 class="section-title">热门推荐</h2>
        <div class="recommend-list">
          <el-row :gutter="20">
            <el-col v-for="event in recommendEvents" :key="event.id" :xs="24" :sm="12" :md="6" :lg="6">
              <el-card class="recommend-card" shadow="hover" @click="navigateToDetail(event.id)">
                <div class="recommend-cover">
                  <img :src="event.cover" :alt="event.title" />
                </div>
                <div class="recommend-info">
                  <h3 class="recommend-title">{{ event.title }}</h3>
                  <div class="recommend-time">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ formatDate(event.startTime) }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Calendar, Location, InfoFilled } from '@element-plus/icons-vue'
import { getFrontEventDetail, getRecommendEvents } from '@/utils/apiAdapter'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const eventId = route.params.id

// 数据绑定
const eventDetail = ref({
  title: '',
  description: '',
  cover: '',
  location: '',
  startTime: '',
  endTime: '',
  category: '',
  tags: [],
  ticketTypes: []
})
const recommendEvents = ref([])
const loading = ref(true)

// 地图相关
const mapContainer = ref(null)
const mapLoading = ref(false)
let map = null
let marker = null

// 获取活动详情
const fetchEventDetail = async () => {
  try {
    loading.value = true
    const res = await getFrontEventDetail(eventId)
    if (res.data) {
      eventDetail.value = res.data
    }
  } catch (error) {
    console.error('获取活动详情失败:', error)
    ElMessage.error('获取活动详情失败')
  } finally {
    loading.value = false
  }
}

// 获取推荐活动
const fetchRecommendEvents = async () => {
  try {
    const res = await getRecommendEvents(4)
    if (res.data) {
      // 过滤掉当前活动
      recommendEvents.value = res.data.filter(event => event.id !== parseInt(eventId))
    }
  } catch (error) {
    console.error('获取推荐活动失败:', error)
  }
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 只格式化时间部分
const formatTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 导航到活动详情页
const navigateToDetail = (id) => {
  if (id !== parseInt(eventId)) {
    router.push(`/front/event/detail/${id}`)
  }
}

// 处理购票
const handleBuyTicket = (ticket) => {
  // 检查是否登录
  const frontToken = localStorage.getItem('frontToken')
  if (!frontToken) {
    ElMessageBox.confirm('购买票券需要先登录，是否前往登录页面？', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      router.push({
        path: '/front/login',
        query: { redirect: route.fullPath }
      })
    }).catch(() => {
      // 用户取消操作
    })
    return
  }
  
  // 跳转到创建订单页面
  router.push({
    path: '/front/order/create',
    query: {
      eventId: eventId,
      ticketId: ticket.id
    }
  })
}

// 初始化地图
const initMap = async () => {
  if (!eventDetail.value.location) return
  
  mapLoading.value = true
  
  try {
    // 确保Leaflet相关资源已加载
    await loadLeaflet()
    
    // 添加自定义样式
    addCustomMapStyles()
    
    // 创建地图实例
    nextTick(() => {
      if (!mapContainer.value) return
      
      // 默认地图中心点（如果无法通过地址获取坐标，可使用默认值）
      const defaultLat = 39.9042
      const defaultLng = 116.4074
      
      // 创建地图实例
      map = L.map('event-map', {
        zoomControl: false,  // 禁用默认的缩放控件
        attributionControl: false, // 关闭attribution控件
        dragging: true,     // 允许拖动
        touchZoom: true,    // 允许触摸缩放
        scrollWheelZoom: false, // 禁用滚轮缩放，避免用户误操作
        doubleClickZoom: true,  // 允许双击缩放
        boxZoom: false,     // 禁用框选缩放
        zoomSnap: 2,        // 设置缩放级别的跳跃单位为2
        zoomDelta: 2,       // 缩放按钮每次改变的级别为2
        minZoom: 6,         // 最小缩放级别
        maxZoom: 14,        // 最大缩放级别
        inertia: false,     // 禁用惯性平移，使地图更精确
        fadeAnimation: false, // 禁用淡入淡出动画
        zoomAnimation: false, // 禁用缩放动画
        markerZoomAnimation: false, // 禁用标记缩放动画
        preferCanvas: true    // 使用Canvas渲染，可能对性能有帮助
      }).setView([defaultLat, defaultLng], 10)  // 使用固定的初始缩放级别
      
      // 添加地图图层
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 14,
        minZoom: 6,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map)
      
      // 添加缩放控件但位置调整到右下角且更小
      L.control.zoom({
        position: 'bottomright',
        zoomInTitle: '放大',
        zoomOutTitle: '缩小',
        zoomInText: '+',
        zoomOutText: '-'
      }).addTo(map)
      
      // 尝试通过地址获取坐标
      const locationText = eventDetail.value.location
      geocodeAddress(locationText)
      
      // 地图加载完成后处理
      mapLoading.value = false
    })
  } catch (error) {
    console.error('地图加载失败:', error)
    mapLoading.value = false
    ElMessage.error('地图加载失败，请稍后再试')
  }
}

// 加载Leaflet库
const loadLeaflet = async () => {
  // 如果已经加载过Leaflet，则直接返回
  if (window.L) return Promise.resolve()
  
  return new Promise((resolve) => {
    // 加载CSS
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
    document.head.appendChild(link)
    
    // 加载JS
    const script = document.createElement('script')
    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
    script.onload = resolve
    document.head.appendChild(script)
  })
}

// 地理编码函数（将地址转为坐标）
const geocodeAddress = (address) => {
  // 这里仅做简单示例，针对特定地址返回固定坐标
  // 真实场景中可能需要调用第三方API或使用客户端地理编码库
  
  console.log('尝试将地址转为坐标:', address)
  
  // 如果地址为空或过短（少于2个字符），使用默认位置
  if (!address || address.length < 2 || address === 'asd') {
    // 使用默认位置（北京天安门）
    const defaultLat = 39.9042
    const defaultLng = 116.4074
    updateMapMarker(defaultLat, defaultLng, '默认位置（具体地址未提供）')
    
    // 显示一个提示信息，告知用户地址信息不足
    if (map) {
      const infoPopup = L.popup({
        maxWidth: 160,
        minWidth: 120,
        closeButton: false,
        autoClose: true,
        closeOnEscapeKey: true,
        closeOnClick: true
      })
        .setLatLng([defaultLat, defaultLng])
        .setContent(`
          <div style="text-align: center; font-size: 11px;">
            <div style="margin: 4px 0; color: #f56c6c; font-weight: bold;">地址信息不足</div>
            <div style="margin: 3px 0;">显示默认位置</div>
          </div>
        `)
        .openOn(map)
        
      // 3秒后自动关闭提示
      setTimeout(() => map.closePopup(infoPopup), 3000)
    }
    return
  }
  
  // 从地址中提取可能的城市名称
  const extractPossibleCityNames = (address) => {
    // 常见的地址格式分隔符
    const separators = ['市', '区', '县', '省', '自治区', '，', ',', ' '];
    
    // 尝试从地址中分割出可能的城市名称
    let possibleNames = [];
    
    // 将完整地址添加到可能的名称中
    possibleNames.push(address);
    
    // 对于每个分隔符，尝试分割并获取第一部分（通常是城市/省份）
    for (const separator of separators) {
      if (address.includes(separator)) {
        // 尝试获取分隔符前的部分
        const parts = address.split(separator);
        possibleNames.push(parts[0]);
        
        // 如果分隔符是"省"，尝试获取省后面的城市名
        if (separator === '省' && parts.length > 1) {
          // 查找下一个分隔符
          for (const nextSep of separators) {
            if (parts[1].includes(nextSep)) {
              possibleNames.push(parts[1].split(nextSep)[0]);
              break;
            }
          }
        }
      }
    }
    
    return [...new Set(possibleNames)].filter(name => name && name.length >= 2);
  };
  
  // 模拟一些常见地点的坐标（扩展版本）
  const knownLocations = {
    '北京': [39.9042, 116.4074],
    '上海': [31.2304, 121.4737],
    '广州': [23.1291, 113.2644],
    '深圳': [22.5431, 114.0579],
    '杭州': [30.2741, 120.1551],
    '成都': [30.5728, 104.0668],
    '西安': [34.3416, 108.9398],
    '南京': [32.0603, 118.7969],
    '武汉': [30.5928, 114.3055],
    '重庆': [29.4316, 106.9123],
    '天津': [39.3434, 117.3616],
    '苏州': [31.2990, 120.5853],
    '厦门': [24.4807, 118.0892],
    '青岛': [36.0671, 120.3826],
    '长沙': [28.2282, 112.9388],
    '大连': [38.9140, 121.6147],
    '宁波': [29.8683, 121.5440],
    '济南': [36.6512, 117.1201],
    '郑州': [34.7466, 113.6256],
    '昆明': [25.0389, 102.7183],
    '合肥': [31.8206, 117.2272],
    '南宁': [22.8172, 108.3669],
    '福州': [26.0742, 119.2965],
    '沈阳': [41.8057, 123.4315],
    '哈尔滨': [45.8038, 126.5340],
    '石家庄': [38.0428, 114.5149],
    '太原': [37.8738, 112.5632],
    '长春': [43.8172, 125.3235],
    '南昌': [28.6820, 115.8579],
    '贵阳': [26.6470, 106.6302],
    '兰州': [36.0580, 103.8233],
    '烟台': [37.5555, 121.3484],
    '海口': [20.0442, 110.1995]
  };
  
  // 如果找不到匹配的地点，尝试使用省份/城市匹配（扩展版本）
  const provinces = {
    '京': [39.9042, 116.4074], // 北京
    '沪': [31.2304, 121.4737], // 上海
    '粤': [23.1291, 113.2644], // 广州
    '浙': [30.2741, 120.1551], // 杭州
    '川': [30.5728, 104.0668], // 成都
    '陕': [34.3416, 108.9398], // 西安
    '苏': [32.0603, 118.7969], // 南京
    '鄂': [30.5928, 114.3055], // 武汉
    '渝': [29.4316, 106.9123], // 重庆
    '津': [39.3434, 117.3616], // 天津
    '闽': [26.0991, 119.2956], // 福州
    '皖': [31.8206, 117.2272], // 合肥
    '鲁': [36.6512, 117.1201], // 济南
    '黑': [45.8038, 126.5340], // 哈尔滨
    '冀': [38.0428, 114.5149], // 石家庄
    '晋': [37.8738, 112.5632], // 太原
    '吉': [43.8172, 125.3235], // 长春
    '赣': [28.6820, 115.8579], // 南昌
    '贵': [26.6470, 106.6302], // 贵阳
    '桂': [22.8172, 108.3669], // 南宁
    '甘': [36.0580, 103.8233], // 兰州
    '琼': [20.0442, 110.1995]  // 海口
  };
  
  // 首先尝试完整匹配
  for (const [location, coordinates] of Object.entries(knownLocations)) {
    if (address.includes(location)) {
      updateMapMarker(coordinates[0], coordinates[1], address);
      return;
    }
  }
  
  // 尝试提取可能的城市名称并匹配
  const possibleCityNames = extractPossibleCityNames(address);
  for (const cityName of possibleCityNames) {
    for (const [location, coordinates] of Object.entries(knownLocations)) {
      if (cityName.includes(location) || location.includes(cityName)) {
        updateMapMarker(coordinates[0], coordinates[1], address);
        return;
      }
    }
  }
  
  // 尝试省份简称匹配
  for (const [province, coordinates] of Object.entries(provinces)) {
    if (address.includes(province)) {
      updateMapMarker(coordinates[0], coordinates[1], address);
      return;
    }
  }
  
  // 如果都匹配不到，使用中国的中心位置并显示特殊标记
  const centerLat = 35.8617;
  const centerLng = 104.1954;
  
  if (!map) return;
  
  // 更新地图中心点
  map.setView([centerLat, centerLng], 5);  // 使用较小的缩放级别以展示更大范围
  
  // 移除之前的标记
  if (marker) {
    map.removeLayer(marker);
  }
  
  // 使用自定义标记样式
  const customIcon = L.divIcon({
    className: 'custom-map-marker',
    html: `
      <div style="
        background-color: rgba(255, 87, 51, 0.8);
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        box-shadow: 0 0 8px rgba(0,0,0,0.3);
      ">
        <span style="font-size: 12px;">?</span>
      </div>
    `,
    iconSize: [24, 24],
    iconAnchor: [12, 12]
  });
  
  // 添加新标记
  marker = L.marker([centerLat, centerLng], {
    icon: customIcon
  }).addTo(map);
  
  // 添加弹出信息
  marker.bindPopup(`
    <div style="text-align: center; padding: 3px; font-size: 11px;">
      <div style="margin: 3px 0; color: #ff5733; font-weight: bold;">位置未精确匹配</div>
      <div style="margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;">地址: ${address}</div>
    </div>
  `, {
    closeButton: false,
    autoClose: true,
    maxWidth: 160,
    minWidth: 120,
    className: 'location-not-found-popup'
  }).openPopup();
}

// 更新地图标记
const updateMapMarker = (lat, lng, address) => {
  if (!map) return
  
  // 更新地图中心点 - 使用固定的更小缩放级别
  const zoomLevel = 8 // 使用更小的固定缩放级别
  map.setView([lat, lng], zoomLevel)
  
  // 移除之前的标记
  if (marker) {
    map.removeLayer(marker)
  }
  
  // 创建自定义图标
  const customIcon = L.divIcon({
    className: 'custom-map-marker',
    html: `
      <div style="
        background-color: #5e5ce6;
        color: white;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
      ">
        <span style="font-size: 14px;">📍</span>
      </div>
    `,
    iconSize: [28, 28],
    iconAnchor: [14, 28]
  });
  
  // 添加新标记
  marker = L.marker([lat, lng], {
    icon: customIcon
  }).addTo(map)
  
  // 添加弹出信息
  marker.bindPopup(`<div style="font-size: 11px; white-space: nowrap;"><b>活动地点</b></div>`, {
    closeButton: false,
    autoClose: true,
    maxWidth: 100
  }).openPopup()
}

// 添加自定义样式函数
const addCustomMapStyles = () => {
  // 创建样式元素
  const style = document.createElement('style')
  style.textContent = `
    /* 使地图控件更小更美观 */
    .leaflet-control-zoom {
      border: none !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }
    .leaflet-control-zoom a {
      width: 24px !important;
      height: 24px !important;
      line-height: 24px !important;
      font-size: 14px !important;
      background-color: white !important;
      color: #666 !important;
    }
    .leaflet-control-zoom a:hover {
      background-color: #f8f8f8 !important;
      color: #333 !important;
    }
    .leaflet-control-zoom-in {
      border-top-left-radius: 4px !important;
      border-top-right-radius: 4px !important;
    }
    .leaflet-control-zoom-out {
      border-bottom-left-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }
    .leaflet-popup-content-wrapper {
      border-radius: 8px !important;
      box-shadow: 0 3px 14px rgba(0,0,0,0.2) !important;
    }
    .leaflet-popup-content {
      margin: 8px 10px !important;
      line-height: 1.4 !important;
      font-size: 12px !important;
    }
    /* 确保地图容器内的元素不会溢出 */
    .leaflet-container {
      font-size: 12px !important;
      z-index: 1 !important;
    }
    .leaflet-pane {
      z-index: 1 !important;
    }
    .leaflet-top, .leaflet-bottom {
      z-index: 1 !important;
    }
    /* 缩小地图标记尺寸 */
    .custom-map-marker div {
      transform: scale(0.8);
    }
  `
  document.head.appendChild(style)
}

// 页面加载时获取数据
onMounted(() => {
  fetchEventDetail().then(() => {
    // 获取详情后自动初始化地图
    initMap()
  })
  fetchRecommendEvents()
})
</script>

<style scoped>
.event-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.loading-container {
  padding: 40px;
}

.event-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: start;
}

.cover-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.event-cover {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.event-info {
  padding: 20px 0;
}

.event-title {
  font-size: 40px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #86868b;
  font-size: 17px;
}

.meta-item:nth-child(1) .el-icon {
  font-size: 20px;
  color: #ff9f0a;  /* Apple 橙色 */
}

.meta-item:nth-child(2) .el-icon {
  font-size: 20px;
  color: #ff375f;  /* Apple 粉色 */
}

.meta-item:nth-child(3) .el-icon {
  font-size: 20px;
  color: #5e5ce6;  /* Apple 紫色 */
}

.tag-item {
  margin-left: 8px;
  background: rgba(94, 92, 230, 0.1);
  border: none;
  color: #5e5ce6;
}

.event-section {
  margin-bottom: 60px;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
}

.event-description {
  font-size: 17px;
  line-height: 1.6;
  color: #1d1d1f;
  white-space: pre-wrap;
}

.ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.ticket-card {
  border: none;
  border-radius: 16px;
  background: #fbfbfd;
  transition: all 0.3s ease;
}

.ticket-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ticket-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ticket-name {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
}

.ticket-price {
  font-size: 24px;
  font-weight: 600;
  color: #5e5ce6;
}

.ticket-stock {
  margin-bottom: 20px;
}

.stock-status {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.stock-status.sufficient {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.stock-status.limited {
  background: rgba(255, 159, 10, 0.1);
  color: #ff9f0a;
}

.ticket-action :deep(.el-button) {
  width: 100%;
  height: 44px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 22px;
  background: #5e5ce6;
  border-color: #5e5ce6;
  transition: all 0.3s ease;
}

.ticket-action :deep(.el-button:hover) {
  background: #6b69e3;
  border-color: #6b69e3;
  transform: translateY(-2px);
}

.ticket-action :deep(.el-button.is-disabled) {
  background: #f5f5f7;
  border-color: #f5f5f7;
  color: #86868b;
}

.recommend-list {
  margin-top: 32px;
}

.recommend-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recommend-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.recommend-cover {
  position: relative;
  padding-top: 66.67%;
  overflow: hidden;
}

.recommend-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.recommend-card:hover .recommend-cover img {
  transform: scale(1.05);
}

.recommend-info {
  padding: 16px;
}

.recommend-title {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #86868b;
  font-size: 14px;
}

.recommend-time .el-icon {
  color: #ff9f0a;
}

.location-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-top: 20px;
  align-items: start;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.location-address {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1d1d1f;
  font-size: 17px;
  margin-bottom: 16px;
}

.location-address .el-icon {
  font-size: 20px;
  color: #ff375f;
}

.location-tips {
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.6;
}

.location-tips p {
  margin: 5px 0;
}

.map-wrapper {
  position: relative;
  height: 180px;
  min-height: 180px;
  max-height: 180px;
  overflow: hidden;
  border-radius: 16px;
  box-sizing: border-box;
}

.map-container {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  contain: strict;
}

.map-loading {
  opacity: 0.7;
  position: relative;
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  color: #5e5ce6;
}

@media (max-width: 768px) {
  .event-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .event-title {
    font-size: 32px;
  }

  .section-title {
    font-size: 24px;
  }

  .ticket-list {
    grid-template-columns: 1fr;
  }

  .event-detail-container {
    padding: 20px;
  }

  .location-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .map-container {
    height: 160px;
  }
  
  .map-wrapper {
    min-height: 160px;
    max-height: 160px;
    height: 160px;
  }
}
</style> 